
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单验证</title>
<style type="text/css">
	input[type=text], input[type=password] {
		width: 150px;
		height: 15px;
	}
</style>
<script type="text/javascript">
	
	
</script>
</head>
<body>
	<fieldset style="width: 500px; margin: 0px auto;">
		<b>注册新用户</b>
		<form action="success.html" method="post" onsubmit="return checkAll();">
			<table align="center" width="500" cellpadding="5">
				<tr>
					<td width="30%" align="right">账户:</td>
					<td>
						<input type="text" id="username" onblur="usernameCheck()">
						<span id="usernameSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">密码:</td>
					<td>
						<input type="password" id="password" onblur="passwordCheck()">
						<span id="passwordSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">确认密码:</td>
					<td>
						<input type="password" id="confirm" onblur="confirmCheck()">
						<span id="confirmSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">手机号:</td>
					<td>
						<input type="text" id="phone" onblur="phoneCheck()">
						<span id="phoneSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">学历:</td>
					<td>
						<select id="city" onchange="stuCheck()">
							<option value="">-请选择学历-</option>
							<option value="bj">本科</option>
							<option value="cd">研究生</option>
							<option value="gz">博士</option>
						</select>
						<span id="citySpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">性别:</td>
					<td>
						<label><input type="radio" name="gender" value="male" onclick="genderCheck()"> 男 </label> 
						<label><input type="radio" name="gender" value="female" onclick="genderCheck()"> 女 </label>
						<span id="genderSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">兴趣:</td>
					<td>
						<label><input type="checkbox" name="interest" value="somke" onclick="interestCheck()"> 吃饭 </label> 
						<label><input type="checkbox" name="interest" value="drink" onclick="interestCheck()"> 睡觉 </label> 
						<label><input type="checkbox" name="interest" value="tangtou" onclick="interestCheck()"> 打豆豆 </label> 
						<span id="interestSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="center" colspan="2"><input type="submit" value="注册新用户"></td>
				</tr>
			</table>
		</form>
	</fieldset>
    <script>
        function usernameCheck(){
            var username = document.getElementById("username");
            var value = username.value;
            alert(value);
            var reg = /^\w{6,30}$/;
            var msg = '';
            if(!value){
                msg = '用户不能为空';
            }
            else if(!reg.test(value)){
                msg = '请输入6-30字母数字_';
            }
            var spans = document.getElementById("usernameSpan");
            spans.innerHTML = msg;

            spans.parentNode.parentNode.style.color = msg=="" ? 'black' : 'red';
            return msg == "";
        }

        function checkAll(){
            var username = usernameCheck();
            var password = passwordCheck();
            var confirm = confirmCheck();
            var phone = phoneCheck();
            var edu = eduCheck()

            return username && password && confirm && phone && edu;
        }
    </script>
</body>
</html>